<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>路书</title>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #map_canvas {
            width: 100%;
            height: 500px;
        }

        #result {
            width: 100%;
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>    
    <script type="text/javascript" src="LuShu.js"></script>
</head>
<body>
    <div id="map_canvas"></div>
    <div id="result"></div>
    <button id="run">开始</button>
    <button id="run2">加速x2</button>
    <button id="run3">加速x3</button>
    <button id="resetSpeed">重置速度</button>
    <button id="back">快退</button>
    <button id="stop">停止</button>
    <button id="pause">暂停</button>
    <button id="hide">隐藏信息窗口</button>
    <button id="show">展示信息窗口</button>
    <script>

    var map = new BMap.Map('map_canvas');
	map.enableScrollWheelZoom();
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
	var lushu;
	// 实例化一个驾车导航用来生成路线
    var drv = new BMap.DrivingRoute('北京', {
        onSearchComplete: function(res) {//搜索完成事件，如果状态是成功的话，从当前结果集中选择第一条路径
            if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
                var plan = res.getPlan(0);
                var arrPois =[];
                for(var j=0;j<plan.getNumRoutes();j++){
                    var route = plan.getRoute(j);
                    arrPois= arrPois.concat(route.getPath());
                }
                map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));
                map.setViewport(arrPois);

                lushu = new BMapLib.LuShu(map,arrPois,{
                defaultContent: "从天安门到百度大厦-sunny测试",//"从天安门到百度大厦"
                autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                speed: 4500,
                enableRotation:false//是否设置marker随着道路的走向进行旋转
                });
            }
        }
    });
	drv.search('天安门', '百度大厦');//搜索驾车路径
	//绑定事件
	$("run").onclick = function(){
		lushu.start();
	}
	$("run2").onclick = function () {
	    lushu.changeSpeed(2);
	}
	$("run3").onclick = function () {
	    lushu.changeSpeed(3);
	}
	$("resetSpeed").onclick = function () {
	    lushu.resetSpeed();
	}
	$("stop").onclick = function(){
		lushu.stop();
	}
	$("back").onclick = function () {
	    lushu.back();
	}
	$("pause").onclick = function(){
		lushu.pause();
	}
	$("hide").onclick = function(){
		lushu.hideInfoWindow();
	}
	$("show").onclick = function(){
		lushu.showInfoWindow();
	}
	function $(element){
		return document.getElementById(element);
	}
    </script>
</body>
</html> 